import React, { Component } from 'react';
import styles from './LineTime.css';

import { Select } from 'antd';

const { Option } = Select;
 
 

//时间轴
class LineTime extends Component {
  constructor(props){
    super(props);
    this.formRef = React.createRef();
    this.state={  
        data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
        cirindex:-1,
        intervalTime:1,
        Play:true,
        selectValue:'1S'

    }
    this.timerID=null
  }
 
   
  // 定时器
  iTimer = () => {
    this.timerID = setInterval(() => { 
        if(this.state.cirindex>this.state.data.length-3){
            this.state.cirindex = -1 
        }else{
            this.state.cirindex = this.state.cirindex+1
        }  
        this.setState({
            cirindex:this.state.cirindex
        }) 
    }, this.state.intervalTime * 1000); 
  };

  //间隔时间选择事件
  handleChange = (value) =>{ 
    this.setState({
        selectValue:value,
        intervalTime:value
    },()=>{
        clearInterval(this.timerID);
        setTimeout(this.iTimer,0);   
    }) 
  }

  //刻度点击
  cirClick=(index)=>{ 
    clearInterval(this.timerID);
    this.setState({
        cirindex: index,
    });   
  }
  //暂停/播放
  mpPaused = ()=>{ 
    this.setState({
        Play: !this.state.Play,
    },()=>{
        if(this.state.Play){
            setTimeout(this.iTimer,0);   
        }else{
            clearInterval(this.timerID);
        }
    })  
  }
  //刷新
  refresh = ()=>{
    this.setState({
        Play: true,
        intervalTime:1,
        selectValue:"1S",
        cirindex:-1,
    },()=>{
        clearInterval(this.timerID);
        setTimeout(this.iTimer,0);   
    }) 
  }
  

    componentDidMount(){ 
        setTimeout(this.iTimer,0);  //启动定时器  
    }
    // 组件清除时清除定时器
    componentWillUnmount() {
        clearInterval(this.timerID);
    }

  render() { 
      const {data,Play} = this.state; 
       
      let html = data.map((item,key)=>{
          if(key!=data.length-1){
            return  <div className={styles.calBox}>
                        <div className={styles.Mcal}></div>
                        <div className={styles.Mcal}></div>
                        <div className={styles.Mcal}></div>
                        <div className={styles.Mcal}></div>
                        <div className={styles.Mcal}></div>
                        <div className={styles.Mcal}></div>
                        <div className={styles.Mcal}></div>
                        <div className={styles.Mcal}></div>
                        <div className={styles.Mcal}></div>
                        <div className={styles.Hcal} onClick={this.cirClick.bind(this,key)}>{this.state.cirindex == key?<div className={styles.current} style={{left:"-9px"}}></div>:null}</div>
                    </div>
          }
       
      }) 
      let textHtml = data.map((item,key)=>{
        return <div ket={key}>{item}</div>
      }) 

    return (
      <div className={styles.timelineBox}>
           <div className={styles.intervalBox}>
                <Select  style={{ width: 120 }} onChange={this.handleChange} value={this.state.selectValue}>
                    <Option value="1">1S</Option>
                    <Option value="2">2S</Option> 
                    <Option value="3">3S</Option>
                    <Option value="4">4S</Option>
                    <Option value="5">5S</Option>
                </Select>
           </div>
           <div className={styles.lintTimeB}>
                <div className={styles.TextBox}>
                    {textHtml}
                </div>
                <div className={styles.LineBox}>
                    <div className={styles.Hcal} onClick={this.cirClick.bind(this,-1)}>{this.state.cirindex == -1?<div className={styles.current} style={{left:"-9px"}}></div>:null}</div>
                    {html}  
                </div>  
           </div>
           <div className={Play?styles.play:styles.susp} onClick={this.mpPaused.bind(this)}></div>
           <div className={styles.refresh} onClick={this.refresh.bind(this)}></div>
          
          
      </div>
    );
  }
}

export default LineTime;
